<script setup lang="ts">
import { ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { querySelectTreeTableApi } from '#/api';
import {
  permissionAddApi,
  permissionEditApi,
  permissionQueryByIdApi,
} from '#/api/system/permission';

const record = ref({});

const [Form, formApi] = useVbenForm({
  showDefaultActions: false,
  wrapperClass: 'grid-cols-2',
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  schema: [
    {
      component: 'ApiTreeSelect',
      componentProps: {
        api: () =>
          querySelectTreeTableApi({
            tableName: 'sys_permission',
            labelField: 'name',
            valueField: 'pid',
            sortRankField: 'sort_rank',
            sqlSelect: 'del_flag = 0',
          }),
        placeholder: '请选择上级菜单',
        labelField: 'name',
        childrenField: 'children',
        valueField: 'id',
      },
      fieldName: 'pid',
      formItemClass: 'col-span-2 items-baseline',
      label: '上级菜单',
    },
    {
      component: 'ApiRadioGroup',
      defaultValue: 0,
      rules: 'required',
      componentProps: {
        buttonStyle: 'solid',
        optionType: 'button',
        options: [
          {
            label: '目录',
            value: 0,
          },
          {
            label: '菜单',
            value: 1,
          },
          {
            label: '按钮',
            value: 2,
          },
        ],
      },
      fieldName: 'type',
      formItemClass: 'col-span-2 items-baseline',
      label: '菜单类型',
    },
    {
      component: 'Input',
      rules: 'required',
      componentProps: {
        placeholder: '请输入菜单名称',
      },
      fieldName: 'name',
      label: '菜单名称',
    },
    {
      component: 'IconPicker',
      fieldName: 'icon',
      label: '菜单图标',
      dependencies: {
        show(values) {
          return values.type !== 2;
        },
        triggerFields: ['type'],
      },
    },
    {
      component: 'Input',
      rules: 'required',
      componentProps: {
        placeholder: '请输入路由地址',
      },
      fieldName: 'routePath',
      label: '路由地址',
      help: '访问的路由地址',
      dependencies: {
        show(values) {
          return values.type !== 2;
        },
        triggerFields: ['type'],
      },
    },
    {
      component: 'Input',
      rules: 'required',
      componentProps: {
        placeholder: '请输入组件路径',
      },
      dependencies: {
        show(values) {
          return values.type === 1;
        },
        triggerFields: ['type'],
      },
      help: '不包含：views',
      fieldName: 'componentPath',
      label: '组件路径',
    },
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入权限标识',
      },
      dependencies: {
        show(values) {
          return values.type !== 0;
        },
        triggerFields: ['type'],
      },
      fieldName: 'perms',
      label: '权限标识',
    },
    {
      component: 'InputNumber',
      componentProps: {
        placeholder: '请输入排序',
      },
      fieldName: 'sortRank',
      label: '排序',
    },
    {
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入路由参数',
      },
      fieldName: 'query',
      formItemClass: 'col-span-2 items-baseline',
      label: '路由参数',
      dependencies: {
        show(values) {
          return values.type !== 2;
        },
        triggerFields: ['type'],
      },
    },
    {
      component: 'Textarea',
      componentProps: {
        placeholder: '请输入备注',
      },
      fieldName: 'remark',
      formItemClass: 'col-span-2 items-baseline',
      label: '备注',
    },
    {
      component: 'RadioGroup',
      defaultValue: 0,
      rules: 'required',
      componentProps: {
        buttonStyle: 'solid',
        optionType: 'button',
        options: [
          {
            label: '是',
            value: 0,
          },
          {
            label: '否',
            value: 1,
          },
        ],
      },
      dependencies: {
        show(values) {
          return values.type === 1;
        },
        triggerFields: ['type'],
      },
      fieldName: 'isKeepAlive',
      label: '是否缓存',
    },
    {
      component: 'RadioGroup',
      defaultValue: 1,
      rules: 'required',
      componentProps: {
        buttonStyle: 'solid',
        optionType: 'button',
        options: [
          {
            label: '是',
            value: 0,
          },
          {
            label: '否',
            value: 1,
          },
        ],
      },
      help: '隐藏之后菜单不可见,按钮权限不可用',
      fieldName: 'isHideInMenu',
      label: '是否隐藏',
    },
    {
      component: 'RadioGroup',
      defaultValue: 1,
      rules: 'required',
      componentProps: {
        buttonStyle: 'solid',
        optionType: 'button',
        options: [
          {
            label: '是',
            value: 0,
          },
          {
            label: '否',
            value: 1,
          },
        ],
      },
      dependencies: {
        show(values) {
          return values.type === 1;
        },
        triggerFields: ['type'],
      },
      fieldName: 'isHideInTab',
      label: '标签页中隐藏',
    },
    {
      component: 'RadioGroup',
      defaultValue: 1,
      rules: 'required',
      componentProps: {
        buttonStyle: 'solid',
        optionType: 'button',
        options: [
          {
            label: '是',
            value: 0,
          },
          {
            label: '否',
            value: 1,
          },
        ],
      },
      dependencies: {
        show(values) {
          return values.type === 1;
        },
        triggerFields: ['type'],
      },
      fieldName: 'isHideInBreadcrumb',
      label: '面包屑中隐藏',
    },
    {
      component: 'RadioGroup',
      defaultValue: 1,
      rules: 'required',
      componentProps: {
        buttonStyle: 'solid',
        optionType: 'button',
        options: [
          {
            label: '是',
            value: 0,
          },
          {
            label: '否',
            value: 1,
          },
        ],
      },
      dependencies: {
        show(values) {
          return values.type !== 2;
        },
        triggerFields: ['type'],
      },
      fieldName: 'isHideChildrenInMenu',
      label: '隐藏子菜单',
    },
    {
      component: 'RadioGroup',
      defaultValue: 1,
      rules: 'required',
      componentProps: {
        buttonStyle: 'solid',
        optionType: 'button',
        options: [
          {
            label: '是',
            value: 0,
          },
          {
            label: '否',
            value: 1,
          },
        ],
      },
      dependencies: {
        show(values) {
          return values.type !== 2;
        },
        triggerFields: ['type'],
      },
      fieldName: 'isBadge',
      label: '开启徽标',
    },
    {
      component: 'RadioGroup',
      defaultValue: 'dot',
      rules: 'required',
      componentProps: {
        buttonStyle: 'solid',
        optionType: 'button',
        options: [
          {
            label: '点',
            value: 'dot',
          },
          {
            label: '文本',
            value: 'normal',
          },
        ],
      },
      dependencies: {
        show(values) {
          return values.isBadge === 0;
        },
        triggerFields: ['isBadge'],
      },
      fieldName: 'badgeType',
      label: '徽标类型',
    },
    {
      component: 'Input',
      rules: 'required',
      componentProps: {
        placeholder: '请输入徽标的值',
      },
      dependencies: {
        show(values) {
          return values.isBadge === 0 && values.badgeType === 'normal';
        },
        triggerFields: ['isBadge', 'badgeType'],
      },
      fieldName: 'badgeValue',
      label: '徽标的值',
      help: '支持文本和API,API要求在result下直接返回文本',
    },
    {
      component: 'RadioGroup',
      defaultValue: 'success',
      rules: 'required',
      componentProps: {
        buttonStyle: 'solid',
        optionType: 'button',
        options: [
          {
            label: 'destructive',
            value: 'destructive',
          },
          {
            label: 'primary',
            value: 'primary',
          },
          {
            label: 'success',
            value: 'success',
          },
          {
            label: 'warning',
            value: 'warning',
          },
        ],
      },
      dependencies: {
        show(values) {
          return values.isBadge === 0;
        },
        triggerFields: ['isBadge'],
      },
      fieldName: 'badgeVariants',
      label: '徽标颜色',
    },
    {
      component: 'RadioGroup',
      defaultValue: 1,
      rules: 'required',
      componentProps: {
        buttonStyle: 'solid',
        optionType: 'button',
        options: [
          {
            label: '是',
            value: 0,
          },
          {
            label: '否',
            value: 1,
          },
        ],
      },
      dependencies: {
        show(values) {
          return values.type === 1 && values.isHideInTab === 1;
        },
        triggerFields: ['type', 'isHideInTab'],
      },
      fieldName: 'isAffixTab',
      label: '固定在标签页',
    },
    {
      component: 'InputNumber',
      rules: 'required',
      componentProps: {
        placeholder: '请输入固定标签页排序',
      },
      dependencies: {
        show(values) {
          return values.isAffixTab === 0;
        },
        triggerFields: ['isAffixTab'],
      },
      fieldName: 'affixTabOrder',
      label: '固定排序',
    },
    {
      component: 'RadioGroup',
      defaultValue: 1,
      rules: 'required',
      componentProps: {
        buttonStyle: 'solid',
        optionType: 'button',
        options: [
          {
            label: '是',
            value: 0,
          },
          {
            label: '否',
            value: 1,
          },
        ],
      },
      dependencies: {
        show(values) {
          return values.type === 0;
        },
        triggerFields: ['type'],
      },
      fieldName: 'isLink',
      label: '是否外链',
    },
    {
      component: 'RadioGroup',
      defaultValue: 0,
      rules: 'required',
      componentProps: {
        buttonStyle: 'solid',
        optionType: 'button',
        options: [
          {
            label: '外部',
            value: 0,
          },
          {
            label: '内部',
            value: 1,
          },
        ],
      },
      dependencies: {
        show(values) {
          return values.type === 0 && values.isLink === 0;
        },
        triggerFields: ['type', 'isLink'],
      },
      fieldName: 'linkOpenWay',
      label: '打开方式',
    },
    {
      component: 'Input',
      rules: 'required',
      componentProps: {
        placeholder: '请输入外链地址',
      },
      dependencies: {
        show(values) {
          return values.isLink === 0;
        },
        triggerFields: ['isLink'],
      },
      fieldName: 'link',
      label: '外链地址',
      help: '连接地址',
    },
    // {
    //   component: 'RadioGroup',
    //   defaultValue: 1,
    //   rules: 'required',
    //   componentProps: {
    //     buttonStyle: 'solid',
    //     optionType: 'button',
    //     options: [
    //       {
    //         label: '是',
    //         value: 0,
    //       },
    //       {
    //         label: '否',
    //         value: 1,
    //       },
    //     ],
    //   },
    //   dependencies: {
    //     show(values) {
    //       return values.type === 1;
    //     },
    //     triggerFields: ['type'],
    //   },
    //   fieldName: 'isMenuVisibleWithForbidden',
    //   label: '访问403',
    //   help: '配置页面在菜单可以看到，但是访问会被重定向到403',
    // },
    {
      component: 'RadioGroup',
      defaultValue: 1,
      rules: 'required',
      componentProps: {
        buttonStyle: 'solid',
        optionType: 'button',
        options: [
          {
            label: '是',
            value: 0,
          },
          {
            label: '否',
            value: 1,
          },
        ],
      },
      dependencies: {
        show(values) {
          return values.type === 1;
        },
        triggerFields: ['type'],
      },
      fieldName: 'openInNewWindow',
      label: '新窗口打开',
      help: '在一个新的窗口重新打开当前菜单',
    },
  ],
});
const [Drawer, drawerApi] = useVbenDrawer({
  title: '菜单',
  destroyOnClose: true,
  onCancel: () => {
    drawerApi.close();
  },
  onConfirm: onsubmit,
  onOpenChange(isOpen: boolean) {
    if (isOpen) {
      record.value = drawerApi.getData<Record<string, any>>();
      drawerApi.setState({ title: `${record.value.id ? '编辑' : '新增'}菜单` });
      if (record.value.id) {
        initFun();
      } else {
        formApi.setValues(record.value);
      }
    }
  },
});
async function initFun() {
  const res = await permissionQueryByIdApi({ id: record.value.id });
  await formApi.setValues(res, false);
}
async function onsubmit() {
  const { valid } = await formApi.validate();
  const values = await formApi.getValues();
  if (valid) {
    if (record.value.id) {
      const msg = await permissionEditApi(values);
      message.success(msg);
      drawerApi.close();
    } else {
      const msg = await permissionAddApi(values);
      message.success(msg);
      drawerApi.close();
    }
  }
}
</script>

<template>
  <Drawer>
    <Form />
  </Drawer>
</template>
